import { ref, computed } from 'vue'
import { defineStore } from 'pinia'
import type { ComponentSize } from 'element-plus'


export const useCounterStore = defineStore('counter', () => {
  const ClickPage = ref(1)
  // 点击切换的页码，默认为第一页

  const PageSize = ref(10)
  // 页码尺寸，暂时可以不用理会
  const size = ref<ComponentSize>('default')
  // 页码尺寸，暂时可以不用理会
  const background = ref(false)
  const disabled = ref(false)

  const handleSizeChange = (val: number) => {
    console.log(`${val} items per page`)
    // 点击显示“当前”页，点下一页，输出则是下一页
    // 点击第五页，输出就是第五页
  }
  const handleCurrentChange = (val: number) => {
    console.log(`current page: ${val}`)
    // 与页面尺码挂钩，暂不理会
  }


  // userLog.vue
  const UserID = ref<number|null>()
  const UserName = ref<string|null>(null)





  return { UserName, UserID, ClickPage, PageSize, size, background, disabled, handleSizeChange, handleCurrentChange }
})

// 翻页模版
// <div class="demo-pagination-block">
//       <el-pagination v-model:current-page="useCounterStore().ClickPage" v-model:page-size="useCounterStore().PageSize"
//         :page-sizes="[100, 200, 300, 400]" :size="useCounterStore().size" :disabled="useCounterStore().disabled" :background="useCounterStore().background"
//         layout="total, sizes, prev, pager, next, jumper" :total="400" @size-change="useCounterStore().handleSizeChange"
//         @current-change="useCounterStore().handleCurrentChange" />
// </div>
